<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
  <title>教务控制台</title>
  <style>
    .dashboard-container {
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .summary-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }
    .summary-card {
      background: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: transform 0.3s;
    }
    .summary-card:hover {
      transform: translateY(-5px);
    }
    .card-title {
      color: #7f8c8d;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .card-value {
      font-size: 28px;
      font-weight: bold;
      color: #2c3e50;
    }
    .card-icon {
      font-size: 40px;
      float: right;
      opacity: 0.2;
    }
  </style>
</head>
<body>
<div class="dashboard-container">
  <h2 style="margin-bottom: 25px; color: #2c3e50;">教务控制台</h2>

  <!-- 数据概览卡片 -->
  <div class="summary-cards">
    <div class="summary-card">
      <div class="card-title">总用户数</div>
      <div class="card-value" id="userCount">加载中...</div>
      <div class="card-icon">👨‍🎓</div>
    </div>
    <div class="summary-card">
      <div class="card-title">总学生数</div>
      <div class="card-value" id="studentCount">加载中...</div>
      <div class="card-icon">👨‍🎓</div>
    </div>
    <div class="summary-card">
      <div class="card-title">在授课程</div>
      <div class="card-value" id="courseCount">加载中...</div>
      <div class="card-icon">📚</div>
    </div>
    <div class="summary-card">
      <div class="card-title">待办事项</div>
      <div class="card-value" id="todoCount">加载中...</div>
      <div class="card-icon">✅</div>
    </div>
    <div class="summary-card">
      <div class="card-title">系统消息</div>
      <div class="card-value" id="messageCount">加载中...</div>
      <div class="card-icon">💬</div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // 从API加载数据
    loadDashboardData();

    function loadDashboardData() {
      $.ajax({
        url: '/api/dashboard/summary',
        type: 'GET',
        success: function(data) {
          $('#userCount').text(data["userCount"]);
          $('#studentCount').text(data["studentCount"]);
          $('#courseCount').text(data["courseCount"]);
          $('#todoCount').text(data["todoCount"]);
          $('#messageCount').text(data["messageCount"]);
        }
      });
    }
  });
</script>
</body>
</html>
